<%= include ic/header.html %>
<style>
body{background:#f7f7f7;}
footer{display:none;}
#main{text-align:center;}
#content{width:100%;margin:20px auto 0;}
@media only screen and (min-width: 1008px){
  #content{width:80%;min-width:1008px;}
}
#backBar{width:auto;height:60px;line-height:60px;font-size:2rem;text-align:left;float:left;cursor:pointer;}
#imgList>div{height:300px;overflow:hidden;margin-bottom:4px;cursor:pointer;}
#imgList div.am-u-sm-2{padding:0!important;}
#imgList div.line1.am-u-sm-5{padding-right:0!important;padding-left:4px!important;}
#imgList div.line2.am-u-sm-5{padding-left:0!important;padding-right:4px!important;}
#imgList .selectBar{width:100%;height:50px;background:rgba(0,0,0,0.7);position:absolute;bottom:0;left:0;line-height:50px;font-size:25px;text-align:right;visibility:hidden;}
#imgList .selectBar span{float:right;margin:0 10px;color:#fff;}
#imgList .selectBar span.title{position:absolute;text-align:left;left:0;top:0;width:80%;height:100%;overflow:hidden;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;font-size:0.7em;}
#imgList>div.hover .selectBar{visibility:visible;}
@media only screen and (max-width: 1399px) {
  #imgList .selectBar{height:36px;line-height:36px;font-size:20px;}
}

@media only screen and (max-width: 1199px) {
    #imgList .selectBar{height:30px;line-height:30px;font-size:16px;}
}
</style>
<div id="main" class="am-cf">
<div id="content">
  <div id="backBar" >
    Search results:
  </div>
  <div class="am-cf"></div>
  <div id="imgList" class="am-g am-cf">
    <% for(var i=0;i<results.length;i++){ %>
    <div class="<% if(i%6==0 || i%6==5){ %>am-u-sm-2<% }else{ %>am-u-sm-5<% } %> <% if(Math.ceil((i+1)/3)%2==1){ %> line1<% }else{ %> line2<% } %> d" onclick="gotoUrl('/image/detail?id=<%= results[i].id %>')" >
      <img src="/p?id=<%= results[i].id %>&w=600" alt="<%= results[i].get('name') %>" title="<%= results[i].get('name') %>">
      <div class="selectBar">
        <span class="likes"><i class="am-icon-heart-o"></i> <%= results[i].get('likes') %></span>
        <span class="clicks"><i class="am-icon-eye"></i> <%= results[i].get('clicks') %></span>
        <span class="title"><%= results[i].get('name') %></span>
      </div>
    </div>
    <% } %>
  </div>
  <div id="loading">Loading...</div>
</div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript" src="/js/jquery.endless-scroll.js"></script>
<script type="text/javascript">
var page=1;totalpage=<%= pager.lastPage %>;isLoading=false;
$(function() {
  fixImg();
  $(window).resize(function(){
    fixImg();
  });
  $("#loading").hide();
  $(document).endlessScroll({
      inflowPixels:0,
      fireDelay: 1000,
      ceaseFireOnEmpty:false,
      fireOnce: false,
      callback: function(){
        console.log("page:"+page+" | totalpage:"+totalpage);
        if(page<totalpage && !isLoading){
          //console.log(2);
          page++;
          isLoading=true;
          getImages();
        }
      }
  });
  $("#imgList>div").hover(function(){$(this).addClass("hover");},
  function(){$(this).removeClass("hover");});
});

function fixImg(){
  $("#imgList>div").height($("#imgList div").first().width()*4/3);
  $("#imgList>div").map(function(){
    var w=$(this).width();
    var h=$(this).height();

    if($(this).hasClass("am-u-sm-5")){
      if($(this).children("img").width()/$(this).children("img").height()>w/h){
        $(this).children("img").height(h);
        $(this).children("img").css("width","auto");
      }else{
        $(this).children("img").width(w);
        $(this).children("img").css("height","auto");
      }
      $(this).children(".selectBar").width($(this).children("img").width());
      if($(this).hasClass("line1")){
        $(this).children(".selectBar").css("left","4px");
      }
    }else{
      $(this).children("img").width(w);
      $(this).children("img").css("height","auto");
      if($(this).children("img").width()/$(this).children("img").height()>w/h){
        $(this).children("img").height(h);
        $(this).children("img").css("width","auto");
      }else{
        $(this).children("img").width(w);
        $(this).children("img").css("height","auto");
      }
    }
  });
  $("#imgList .selectBar").map(function(){
    $(this).children(".title").width($(this).width()-
    $(this).children(".likes").width()-
    $(this).children(".clicks").width()-40);
  });
}

function getImages(){
  $("#loading").show();
  $.post("/search?page="+page, {
    "ajax"		: true,
    keyword   : "<% if(keyword){ %><%= keyword %><% } %>",
  },function(data){
    //console.dir(data);
    $("#loading").hide();
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      var images = data.results;
      //console.log(images[0]);
      var n      = $("#imgList>div").size();
      for(var i=0;i<images.length;i++){
        n++;
        var uc="am-u-sm-5";
        var lc="line2";
        if(n%6==1 || n%6==0)uc="am-u-sm-2";
        if(Math.ceil(n/3)%2==1)lc="line1";
        var html='<div class="'+uc+' '+lc
            +' d" onclick="gotoUrl(\'/image/detail?id='
            + images[i].objectId+'\')" >'
            + '<img src="/p?id='+images[i].objectId+'&w=500" alt="'
            + images[i].name+'" onload="fixImg()" title="'+images[i].name+'">'
            + '<div class="selectBar">'
            + '<span class="likes"><i class="am-icon-heart-o"></i>'
            + images[i].likes+'</span><span class="clicks"><i class="am-icon-eye"></i>'
            + images[i].clicks+'</span><span class="title">'
            + '</span>'
            + '<span class="title">'+images[i].name+'</span></div></div>';
        $("#imgList").append(html);
      }
      $("#imgList>div").hover(function(){$(this).addClass("hover");},
      function(){$(this).removeClass("hover");});
      isLoading=false;
    }else{
      console.error(data.error);
    }
  }, "json");
}
</script>
